有趣，真的是平常自己不會接觸到的，順便學一下

1. 19-Unreal Webcam Fun

• Canvas可以再更熟練點，找到一些教學影片可以看一下比較了解api
• 顏色rgba的應用頗有趣，filter原來是這樣來的
• 19,20真的都太有趣了啊。剩下10篇再接再厲

const video = document.querySelector('.player');
const canvas = document.querySelector('.photo');
const ctx = canvas.getContext('2d');
const strip = document.querySelector('.strip');
const snap = document.querySelector('.snap');

function getVideo(){
  navigator.mediaDevices.getUserMedia({ video:true, audio:false })
    .then(localMediaStream =>{
      console.log(localMediaStream);
      video.src = window.URL.createObjectURL(localMediaStream)
      video.play()
    })
    .catch(err => {
      console.log("Oh NO!!!", err);
    })
}
function paintToCanvas(){
  const width = video.videoWidth
  const height = video.videoHeight
  canvas.width = width
  canvas.height = height

  return setInterval(()=>{
    ctx.drawImage(video, 0, 0 ,width, height)
    //take out pixesl data
    let pixels = ctx.getImageData(0, 0, width, height)
    //filter
    //pixels = redEffect(pixels)
    //put pixel back
    ctx.putImageData(pixels, 0, 0 )

  }, 20)
}
function takePhoto(){
  //sound
  snap.currentTime = 0
  snap.play()

  //take data out of canvas
  const data = canvas.toDataURL('image/jpeg')
  const link = document.createElement('a')
  link.href = data
  link.setAttribute('download','handsome')
  link.innerHTML = ` <img src="${data}" alt="Handsome Man"/> `
  strip.insertBefore(link,strip.firstChild)

}

//filter function
function redEffect(pixels){
  for(let i =0 ; i<pixels.data.length ; i += 4){
    pixels.data[i] += 100
    pixels.data[i+1] -= 50
    pixels.data[i+2] += 3
  }
  return pixels
}

getVideo()
video.addEventListener('canplay', paintToCanvas)

2. 20-Native Speech Recognition

• window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
• 開始與結束，如何loop recognition.addEventListener('end', recognition.start)

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    
  const recognition = new SpeechRecognition()
  recognition.interimResults = true

  let p = document.createElement('p')
  const words = document.querySelector('.words')
  words.appendChild(p)

  recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
      .map(result => result[0])
      .map(result => result.transcript)
      .join('')


      p.textContent = transcript ;
      if (e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p)

      }
      //console.log(transcript); checked
  })
  recognition.addEventListener('end', recognition.start)
  recognition.start()

明天會休息一下，學學別的東西（預計：CSS grid, node.js基本, Rxjs細看等等）